import React, { useState } from "react";
import { Card, Typography } from "antd";
import IrEditor from "@/components/IrEditor";
import { marked } from "marked";

const { Title, Paragraph } = Typography;

const initialMarkdown = `# Markdown 编辑器示例

这是一个 **实时预览** 的 Markdown 编辑器。

## 支持的功能

- **粗体**、*斜体*、~~删除线~~
- [链接](https://example.com)
- 代码块：
\`\`\`javascript
console.log("Hello, Markdown!");
\`\`\`

## 表格支持

| 功能     | 支持状态 |
|----------|----------|
| 表格     | ✅      |
| 代码高亮 | ✅      |
| 实时预览 | ✅      |

> 这是一个引用块
`;

const IrEditorDemo: React.FC = () => {
  const [output, setOutput] = useState(initialMarkdown);
  const [htmlOutput, setHtmlOutput] = useState("");
  const [editorValue, setEditorValue] = useState(initialMarkdown);
  const [manualInput, setManualInput] = useState("");

  const handleEditorChange = (value: string) => {
    setOutput(value);

    // 使用 marked 将 Markdown 转换为 HTML
    setHtmlOutput(marked(value));
  };

  // 手动更新编辑器内容
  const handleSetContent = () => {
    setEditorValue(manualInput);
  };

  // 插入示例内容
  const insertExamples = () => {
    const examples = [
      "## 表格示例\n\n| 名称 | 价格 |\n| --- | --- |\n| 商品A | ¥100 |\n| 商品B | ¥200 |",
      "## 代码块示例\n\n```python\ndef hello():\n    print('Hello World!')\n```",
      "## 任务列表\n\n- [x] 已完成任务\n- [ ] 待办任务\n- [ ] 又一个待办任务",
    ];

    const randomExample = examples[Math.floor(Math.random() * examples.length)];
    setManualInput(randomExample);
  };

  // 清空内容
  const clearContent = () => {
    setEditorValue("");
    setManualInput("");
  };

  // 恢复初始内容
  const resetContent = () => {
    setEditorValue(initialMarkdown);
    setManualInput("");
  };

  return (
    <div style={{ padding: "24px" }}>
      <Title level={2}>Markdown 实时编辑器</Title>
      <Paragraph>
        这是一个基于 Vditor 的 IR 模式（即时渲染）Markdown
        编辑器，支持实时预览和编辑。
      </Paragraph>

      <div style={{ marginBottom: "24px" }}>
        <IrEditor value={editorValue} onChange={handleEditorChange} />
      </div>

      {/* 手动设置内容区域 */}
      <Card title="手动设置内容" style={{ marginBottom: "16px" }}>
        <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
          <textarea
            value={manualInput}
            onChange={(e) => setManualInput(e.target.value)}
            style={{
              width: "100%",
              height: "100px",
              padding: "8px",
              borderRadius: "4px",
              border: "1px solid #d9d9d9",
            }}
            placeholder="输入 Markdown 内容后点击设置按钮..."
          />

          <div style={{ display: "flex", gap: "8px" }}>
            <button
              onClick={handleSetContent}
              style={{
                padding: "4px 15px",
                backgroundColor: "#1677ff",
                color: "white",
                border: "none",
                borderRadius: "2px",
                cursor: "pointer",
              }}
            >
              设置内容
            </button>
            <button
              onClick={insertExamples}
              style={{
                padding: "4px 15px",
                backgroundColor: "#52c41a",
                color: "white",
                border: "none",
                borderRadius: "2px",
                cursor: "pointer",
              }}
            >
              插入示例
            </button>
            <button
              onClick={clearContent}
              style={{
                padding: "4px 15px",
                backgroundColor: "#ff4d4f",
                color: "white",
                border: "none",
                borderRadius: "2px",
                cursor: "pointer",
              }}
            >
              清空内容
            </button>
            <button
              onClick={resetContent}
              style={{
                padding: "4px 15px",
                backgroundColor: "#faad14",
                color: "white",
                border: "none",
                borderRadius: "2px",
                cursor: "pointer",
              }}
            >
              恢复初始内容
            </button>
          </div>
        </div>
      </Card>

      <div style={{ display: "flex", gap: "20px" }}>
        <Card
          title="Markdown 源码"
          style={{ width: "50%", marginBottom: "16px" }}
          extra={<span>{output.length} 字符</span>}
        >
          <pre
            style={{
              whiteSpace: "pre-wrap",
              wordBreak: "break-word",
              maxHeight: "300px",
              overflow: "auto",
            }}
          >
            {output}
          </pre>
        </Card>

        <Card
          title="HTML 输出"
          style={{ width: "50%", marginBottom: "16px" }}
          extra={<span>{htmlOutput.length} 字符</span>}
        >
          <div
            style={{ maxHeight: "300px", overflow: "auto" }}
            dangerouslySetInnerHTML={{ __html: htmlOutput }}
          />
        </Card>
      </div>
    </div>
  );
};

export default IrEditorDemo;
